<template>
  <div style="margin: 2em">
    <el-row type="flex" justify="end" style="margin-right: 1em">
      <el-button type="primary" size="mini" @click="batchEdit = !batchEdit">{{
        batchEdit ? "取消批量修改" : "批量修改"
      }}</el-button></el-row
    >
    <el-table
      :data="notifications"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      @row-click="read"
    >
      <el-table-column
        v-if="batchEdit"
        type="selection"
        min-width="5%"
      ></el-table-column>
      <el-table-column min-width="10%" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.is_read" type="success">已读</el-tag>
          <el-tag v-if="!scope.row.is_read" type="danger">未读</el-tag>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header" v-if="batchEdit"> 全选 </template>
        <template slot-scope="scope">
          <!-- 根据verb区分几种不同的通知 -->
          <div v-if="scope.row.verb == 'commented'">
            <router-link
              :to="{ name: 'User', params: { id: scope.row.obj_detail.id } }"
              tag="a"
            >
              <el-avatar :src="scope.row.obj_detail.avatar"></el-avatar
              >{{
                scope.row.obj_detail.nickname | nicknameEllipsis
              }}</router-link
            >在 <el-link @click="readAndGotoArticle(scope.row, false)" :underline="false" style="color:blue;"
            >
              这篇伪博 </el-link
            > 中发表了评论
            <div>{{ scope.row.new_comment_content.content }}</div>
          </div>

          <div v-else-if="scope.row.verb == 'replied'">
            <router-link
              :to="{ name: 'User', params: { id: scope.row.obj_detail.id } }"
              tag="a"
            >
              <el-avatar :src="scope.row.obj_detail.avatar"></el-avatar
              >{{
                scope.row.obj_detail.nickname | nicknameEllipsis
              }}</router-link
            >
            在 <el-link  @click="readAndGotoArticle(scope.row, false)" :underline="false" style="color:blue;"
            >
              这篇伪博 </el-link
            > 中回复了你的评论
            <div style="margin-top: 0.5em; margin-bottom: 0.5em">
              {{ scope.row.new_comment_content.content }}
            </div>
            <div
              style="
                font-size: 0.5em;
                margin-left: 1em;
                background-color: rgb(240, 240, 240);
                padding: 1em;
                border-radius: 0.5em;
              "
            >
              {{ scope.row.comment_content.content }}
            </div>
          </div>

          <div v-else-if="scope.row.verb == 'issued'">
            <router-link
              :to="{ name: 'User', params: { id: scope.row.obj_detail.id } }"
              tag="a"
            >
              <el-avatar :src="scope.row.obj_detail.avatar"></el-avatar
              >{{
                scope.row.obj_detail.nickname | nicknameEllipsis
              }}</router-link
            >发布了一篇 <el-link @click="readAndGotoArticle(scope.row, true)" :underline="false" style="color:blue;"
            >
              新的伪博
            </el-link>
          </div>
        </template></el-table-column
      >
      <el-table-column min-width="20%" show-overflow-tooltip align="right"
        ><template slot-scope="scope">{{
          scope.row.created_at | datetimeFormatter
        }}</template></el-table-column
      >
    </el-table>
    <div style="margin-top: 20px" v-show="batchEdit">
      <el-button
        @click="batchRead"
        size="mini"
        type="primary"
        :disabled="multipleSelection.length == 0"
        >标记为已读</el-button
      >
      <el-button
        @click="clearSelection()"
        size="mini"
        :disabled="multipleSelection.length == 0"
        >取消选择</el-button
      >
    </div>
    <el-pagination
      layout="prev, pager, next"
      :page-size="10"
      :current-page="currentPage"
      @current-change="currentChange"
      :hide-on-single-page="true"
      :total="total"
      style="margin-top: 2em"
    >
    </el-pagination>
  </div>
</template>

<script>
import Notification from "../components/Notification";
export default {
  data() {
    return {
      baseUrl: "notifications/",
      notifications: [],
      batchEdit: false,
      multipleSelection: [],
      currentPage: 1,
      total: 0,
      yet2read:[], //if notification not read in batch, just mark as read for now, and send read request before destroy.
    };
  },
  mounted() {
    this.getData();
  },
  beforeDestroy(){
    this.handleYet2read();
  },
  components: {
    Notification,
  },
  computed: {
    url() {
      return this.baseUrl + "?page=" + this.currentPage;
    },
  },
  methods: {
    getData() {
      this.$http.get(this.url).then((res) => {
        this.notifications = res.data.results;
        this.total = res.data.count;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    clearSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    batchRead() {
      let ids = this.multipleSelection.map((val) => {
        return val.id;
      });
      this.$http
        .post("notifications/read_many/", { notifications: ids })
        .then(() => {
          this.getData();
        });
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.getData();
    },
    read(row) {
      if (row.is_read) {
        return;
      }
      this.yet2read.push(row.id)
      row.is_read = true;
      // this.$http.post("notifications/" + row.id + "/read/").then(() => {
      //   row.is_read = true;
      // });
    },
    readAndGotoArticle(row, isNewArticle){
      this.read(row)
      let route = { name: 'Article', params: { id: row.article } }
      if(isNewArticle){
        route = { name: 'Article', params: { id: row.new_article } }
      }
      this.$router.push(route)
    },
    handleYet2read(){
      let cnt = this.yet2read.length
      if(cnt==0){
        return
      }else if(cnt==1){
        this.$http.post("notifications/" + this.yet2read[0] + "/read/").then(() => {
      });
      }else{
        this.$http
        .post("notifications/read_many/", { notifications: this.yet2read })
        .then(() => {
          this.getData();
        });
      }
    }
  },
};
</script>

<style>
a {
  text-decoration: none;
}
</style>